<template>
    <!-- 搜索界面 -->
    <ContentPanel>
        <div class="search-form">
            <!--input输入-->
            <el-input clearable placeholder="请输入用户id或群组id" v-model="contactId" size="large"
                @keydown.enter="search"></el-input>
            <div class="search-btn iconfont icon-sousuo" @click="search"></div>
        </div>
        <!-- 搜索结果 -->
        <div class="search-result-panel" v-if="searchResult && Object.keys(searchResult).length > 0">
            <div class="search-result">
                <span class="contact-type"> {{ contactTypeName }}</span>
                <!-- 用户信息 -->
                <UserBaseInfo :userInfo="searchResult" :showArea="searchResult.contactType == 0"></UserBaseInfo>
                <!-- 添加按钮 -->
                <div class="op-btn" v-if="searchResult.contactId != userInfoStore.getUserInfo().userId">
                    <!-- 根据id对应的类型的不同，有不同的操作 -->
                    <!-- 和该用户的状态有很多种，已经是好友，已经加入黑名单等等 -->
                    <!-- 已经添加好友或者已加入群组 -->
                    <el-button type="primary" v-if="searchResult.status == null || searchResult.status == 'FRIENDS'"
                        @click="sendMessage">发消息</el-button>
                    <!-- 无法添加的状态 -->
                    <span v-else-if="searchResult.status == 'BLOCKED_BY_FRIEND'">对方拉黑了你</span>
                    <span v-else-if="searchResult.status == 'DELETED_BY_FRIEND'">对方删除了你</span>
                    <!-- 可以添加的状态 -->
                    <el-button type="primary" v-else @click="applyContact">{{ searchResult.contactType == 'USER' ?
                        '添加到联系人' : '申请加入群组' }}</el-button>
                </div>
            </div>
        </div>
        <div class="no-data" v-else>没有搜到任何结果</div>
    </ContentPanel>
    <SearchAdd ref="searchAddRef" @reload="resetForm" />
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue"
const { proxy } = getCurrentInstance();
const contactId = ref();
const searchResult = ref([]);

// 用户信息
import { useUserInfoStore } from "@/stores/UserInfoStore";
const userInfoStore = useUserInfoStore();

/* 计算搜索结果的类型 */
const contactTypeName = computed(() => {
    if (userInfoStore.getUserInfo().userId == searchResult.value.contactId) {
        return "自己";
    } else if (searchResult.value.contactType == 'USER') {
        return "用户";
    }
    else if (searchResult.value.contactType == 'GROUP') {
        return "群组";
    }
});

/* 发送搜索请求 */
const search = async () => {
    // 校验输入是否为空
    if (!contactId.value) {
        proxy.Message.warning("请输入用户id或群组id")
        return;
    }
    let result = await proxy.Request({
        url: proxy.Api.search,
        method: "get",
        params: {
            contactId: contactId.value
        }
    })
    if (!result) {
        return;
    }
    searchResult.value = result.data;
};

import SearchAdd from "@/views/contact/SearchAdd.vue";
const searchAddRef = ref(null);
const applyContact = () => {
    // 点击按钮后弹出对话框
    searchAddRef.value.show(searchResult.value);
}

/* 清空搜索内容 */
const resetForm = () => {
    searchResult.value = [];
    contactId.value = undefined;
}

const sendMessage = () => {
}
</script>

<style lang="scss" scoped>
.search-form {
    padding-top: 50px;
    display: flex;
    align-items: center;

    :deep(.el-input__wrapper) {
        border-radius: 4px 0 0 4px;
        border-right: none;
    }

    .search-btn {
        background: #409eff;
        color: #fff;
        line-height: 40px;
        width: 80px;
        text-align: center;
        border-radius: 0 5px 5px 0;
        cursor: pointer;

        &:hover {
            background: #66b1ff;
        }
    }
}

.no-data {
    padding: 30px 0;
}

.search-result-panel {
    .search-result {
        padding: 30px 20px 20px 20px;
        background: #e6eaf0;
        border-radius: 5px;
        margin-top: 10px;
        position: relative;

        .contact-type {
            position: absolute;
            left: 0px;
            top: 0px;
            background: #66b1ff;
            padding: 2px 5px;
            color: #fff;
            border-radius: 5px 0 0 0;
            font-size: 12px;

        }

        .op-btn {
            text-align: center;
        }
    }
}
</style>
